<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
<style type="text/css">
	p,body{margin: 0;padding: 0;}
	p{width:400px;padding: 10px 0;border:1px solid #333;margin: 20px auto;text-align: center;}
	img{border: none; vertical-align: top; cursor: pointer;}
	span {font-size: 12px;}
</style>
<script>
window.onload = function (){
	var aImg = document.getElementsByTagName('img');
	var oSpan = document.getElementById('comment');
	var arrUrl = ['normal.gif','bad.gif','good.gif','click.gif'];
	var arrText = ['极差','很差','还行','不错','推荐'];
	var num;

	function rating(n,arr){
		for (var i = 0; i <= n; i++) {
			oSpan.innerHTML = arrText[i];
			if (n < 2) {	
				aImg[i].src = arrUrl[1];
				oSpan.style.color = 'red';
			} else{
				aImg[i].src = arr;
				oSpan.style.color = 'green';

				if (i == 2) {
					oSpan.style.color = 'orange';
				}
			};
		};
	}

	for (var i = 0; i < aImg.length; i++) {
		aImg[i].index = i;
		aImg[i].onmouseover = function (){
			for (var i = 0; i < aImg.length; i++) {
				aImg[i].src = arrUrl[0];
			};

			rating(this.index,arrUrl[2]);

			/*for (var i = 0; i <= this.index; i++) {
				if (this.index < 2) {	
					aImg[i].src = arrUrl[1];
				} else{
					aImg[i].src = arrUrl[2];
				};
			};*/
		}

		aImg[i].onclick = function (){
			/*for (var i = 0; i <= this.index; i++) {
				if (this.index < 2) {	
					aImg[i].src = arrUrl[1];
				} else{
					aImg[i].src = arrUrl[3];
				};
			};*/

			rating(this.index,arrUrl[3]);
			num = this.index;		//点击才有给出值，不要在开头定义全局变量，否则第一个星星总是会亮，除非只写var num;
											//如果这里只写num = this.index也可以，因为函数内部本身都有隐藏一个return
		}

		//移出事件是难点也是重点
		aImg[i].onmouseout = function (){
			for (var i = 0; i < aImg.length; i++) {		//重点在这一步啊== 先执行全部清空，然后再让后面的覆盖----想了半天
				aImg[i].src = arrUrl[0];
			};

			rating(num,arrUrl[3]);

			if (!num) {
				oSpan.innerHTML = '&nbsp;&nbsp;';
			}
			/*for (var i = 0; i <= num; i++) {			//只要考虑到0~num
				
				if (num < 2 ) {
					aImg[i].src = arrUrl[1];
				}else{
					aImg[i].src = arrUrl[3];
				};
			};*/
			
		}
	};




}
</script>
</head>
<body>
	<p>
		我的评价：
			<img src="normal.gif" alt="">
			<img src="normal.gif" alt="">
			<img src="normal.gif" alt="">
			<img src="normal.gif" alt="">
			<img src="normal.gif" alt="">
		<span id="comment">&nbsp;&nbsp;</span>
	</p>
</body>
</html>